<div class="role-container">
  <iotek-toast [toastConfig]="toastConfig"></iotek-toast>
  <p><span class="title">{{title}}</span>
    <button class="btn btn-primary btn-xs" (click)="addRole()">创建新角色</button>
    <i class="glyphicon glyphicon-remove remove" (click)="closeWindow()"></i></p>
  <div class="table-responsive">
    <table class="table table-hover table-striped" (dragover)="onTableDragOver($event)" (drop)="onDragDrop($event)">
      <thead>
      <tr>
        <th>ID</th>
        <th>角色名</th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr *ngIf="isNew">
        <td></td>
        <td  class="edit">
          <input [(ngModel)]="newRole" id="newRole" name="newRole" (keyup.enter)="saveNewRole(newRole)" (keydown.esc)="cancel()">
        </td>
        <td class="table-action">
        </td>
      </tr>
      <tr *ngFor="let role of roles" draggable="true" (dragstart)="onDragStart($event, role)">
        <td>{{role.id}}</td>
        <td class="edit">
          <input  *ngIf="editable" [(ngModel)]="role.name" name="name" (keyup.enter)="editNewRole(role)" (keydown.esc)="cancel()" id="roleId-{{role.id}}">
          <span *ngIf="!editable">{{role.name}}</span>
        </td>
        <td class="table-action">
          <a><i class="fa fa-pencil" (click)="edit(role.id)" ></i></a>
          <a><i class="fa fa-trash-o" (click)="delete(role.id)"></i></a>
        </td>
      </tr>
      </tbody>
    </table>
    <iotek-pagenation [paginationConfig]="pager"></iotek-pagenation>

  </div><!-- table-responsive -->
</div>
